<template>
  <div class="errorPage401">
    <div class="errPage-container">
    <button class="btn1">返回</button>
    <div class="content">
      <div class="left">
        <h1 class="text-jumbo text-ginormous">糟糕!</h1>
        <h2>你没有权限去该页面</h2>
        <h5>如有不满请联系你领导</h5>
        <ul>
          <li>或者你可以去:</li>
          <li class="link-type"><a href="">回首页</a></li>
          <li class="link-type">
            <a href="https://www.taobao.com/">随便看看</a>
          </li>
          <li class="link-type"><a href="">点我看图</a></li>
        </ul>
      </div>
      <div class="right">
        <img :src="errGif" class="pan-img" />
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import errGif from "@/assets/401_images/401.gif";

export default {
  name: "401",
  data() {
    return {
      errGif: errGif + "?" + +new Date(),
    };
  },
};
</script>
<style scoped>
.errorPage401{
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 100px;
}
.errPage-container {
  width: 800px;
  max-width: 100%;
  margin:  auto;
}
.btn1 {
  background: #008489;
  color: #fff;
  border: none !important;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 400;
}
h1 {
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.text-jumbo {
  font-size: 60px;
  font-weight: 700;
  color: #484848;
}
.content {
  display: flex;
}
.left {
  width: 50%;
}
.right {
  width: 50%;
}
.pan-img {
  width: 313px;
  height: 418px;
}
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  font-size: 14px;
}
.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;
}
li {
  padding-bottom: 5px;
}
a {
  color: #008489;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
</style>